<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="../ExtJS/resources/css/ext-all.css"/>
		<link rel="stylesheet" type="text/css" href="../css/buttons.css"/>
		<script type="text/javascript" src="../ExtJS/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../ExtJS/ext-all.js"></script>
		
		<script type="text/javascript">
		Ext.onReady(function() {
			var pbar2 = new Ext.ProgressBar({
		        text:'Ready',
		        id:'pbar2',
		        width: 500,
		        cls:'left-align'
		    });
			
			var panel = new Ext.Panel({
				region: 'center',
				frame: true,
				layout: {
                    type:'vbox',
                    padding:'5',
                    align:'stretch'
                },
                defaults:{margins:'0 0 5 0'},
				items:[
					{id:'timefield', height: 50},
					{
						xtype: 'panel',
						layout: {
		                    type:'hbox',
		                },
		                defaults:{margins:'0 0 5 10'},
						items: [
							pbar2,
							{xtype: 'button', text:'start', width: 60, handler: startRun}
						]
					}
				]
			})
			
			function startRun() {
				pbar2.updateProgress(10/100, 'Loading item ' + 10 + ' of '+100+'...');
			}
			
			new Ext.Viewport({
				layout: 'border',
				items:[
					panel
				]
			});
			
			var updateClock = function(){
			    Ext.fly('timefield').update(new Date().format('Y-m-d H:i:s'));
			} 
			var task = {
			    run: updateClock,
			    interval: 1000 //1 second
			}
			var runner = new Ext.util.TaskRunner();
			runner.start(task);

			Ext.TaskMgr.start({
			    run: updateClock,
			    interval: 1000
			});
		});
		
		</script>
	</head>
</html>